/**
 * 通过修改package.json文件中的browserslist中的内容修改兼容列表，实现浏览器的兼容
 * @1 对postcss-loader生效，控制css3的前缀
 * @2 对babel-loader生效，控制ES6的转换
 * @3 遗留的问题（无法处理ES6内置API的兼容）
 * (需要使用react-app-polyfill处理 如下)
*/
// 对ES6内置API做兼容处理
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import '@/index.less';
// import { createElement, render } from './jsxHandle';
import FnCom from '@/views/functionCom';
import Dialog from './components/Dialog';
import FnVote from './views/vote/FnVote';
import ClassVote from './views/vote/ClassVote';
import DemoComponent from './views/demoDiff/demoComponent';
import DemoPureComponent from './views/demoDiff/demoPureComponent';
import DemoDomRef from './views/demoRef/demoDomRef';
import DemoComponentRef from './views/demoRef/demoComponentRef';
import DemoSetStateAdvance from './views/demoSetStateAdvance/demoSetStateAdvance';
import DemoTest from './views/demoSetStateAdvance/testDemo';
import SyntheticBaseEvent from './views/syntheticBaseEvent/syntheticBaseEvent';
import Theory from './views/syntheticBaseEvent/theory';
import MobileClickEvent from './views/移动端手指点击/demo';
import CirculationBindEvent from './views/循环事件绑定/index';

// 使用fastclick解决移动端点击事件中300ms延迟的问题
import Fastclick from "fastclick";
Fastclick.attach(document.body); 

const root = ReactDOM.createRoot(document.getElementById('root'));

// class Count extends React.Component {
//   state = { num: 0 };
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <span>{num}</span>
//         <br />
//         <button onClick={() => {
//           num++;
//           this.setState({
//             num
//           })
//         }}>累加</button>
//       </div>
//     );
//   };
// };

let supNum = 15;

/**
 * render函数在渲染的时候， 如果type是
 * = 字符串：创建一个标签
 * = 普通函数：将函数执行，并且将props传递给函数
 * = 构造函数：将构造函数基于new执行，（也就是创建类的实例，也会把解析出来的props传递过去）
 *   +每调用一次类组件都会创建一个单独的实例
 *   +执行类组件中的编写的render函数，将返回的jsx（virtualDom)当做组件视图进行渲染
 *   例如：new ClassVote({ title: '投票--类组件' })
 */
root.render(
  // <Count />

  // 空文档标记标签 <></>
    <>
        {/* <Count /> */}

        {/* <div>DEMO</div> */}

        {/* {React.createElement('button', null, '按钮')} */}
        
        {/* <FnCom 
        requiredX={100} 
        title="函数组件" 
        x={10} 
        data={[ 1, 2 ]} 
        className="box" 
        style={{ fontSize: '30px', color: '#f40' }}
        >
        <p slot="footer">child-footer</p>
        <p slot="header">child-header</p>
        <p>child-default</p>
        </FnCom> */}

        {/* <Dialog title="友情提示" content="大家出门注意个人防护"></Dialog>
        <Dialog content="好好学习React">
        <button>取消</button>
        <button>确定</button>
        </Dialog> */}

        {/* <FnVote title="投票组件"></FnVote> */}
        {/* <ClassVote title="投票--类组件"></ClassVote> */}
        {/* <DemoComponent></DemoComponent> */}
        {/* <DemoPureComponent></DemoPureComponent> */}
        {/* <DemoDomRef></DemoDomRef> */}
        {/* <DemoComponentRef></DemoComponentRef> */}
        {/* <DemoSetStateAdvance></DemoSetStateAdvance> */}
        {/* <DemoTest></DemoTest> */}
        {/* <SyntheticBaseEvent></SyntheticBaseEvent> */}
        {/* <Theory></Theory> */}
        {/* <MobileClickEvent></MobileClickEvent> */}
        <CirculationBindEvent></CirculationBindEvent>
    </>
);
// setTimeout(() => {
//   root.render(
//     <>
//       <ClassVote title="投票--类组件"></ClassVote>
//     </>
//   );
// }, 2000);
// console.log(React.createElement(ClassVote, { title: '投票--类组件' }), 'ClassVote');
/**
 * 类组件第一次渲染的底层逻辑
 */

// fetch('/zhi/news/latest')
//   .then(response => response.json())
//   .then(value => {
//     console.log(value);
//   });
  
// fetch('/jian/subscriptions/recommended_collections')
//   .then(response => response.json())
//   .then(value => {
//     console.log(value);
//   });

// let jsxObj = createElement(
//   'div',
//   { className: 'container' },
//   createElement(
//     'h2',
//     { className: 'title', style: { color: 'red', fontSize: '20px', } },
//     '\u73E0\u5CF0\u57F9\u8BAD',      
//   ),
//   createElement(
//     'div',
//     { className: 'box', },
//     createElement('span', null, 10),
//     createElement('span', null, 20),
//   ),
// );
// render(jsxObj, document.getElementById('root'));


